import { CommonTooltipLabel } from "@/hy_dev_lib/src/components/PopoverTips";
import { EditOutlined } from '@ant-design/icons';
import { Form, FormInstance, Input, InputNumber, Radio, Switch } from "antd";
import { useState } from "react";
import EditOptions from "../FormItemConfig/EditOptions";
import SelectOptions from "../FormItemConfig/SelectOptions";

export interface IConfigProps {
    form: FormInstance<any>
}

export const InputConfig = () => {
    return <>
        <Form.Item
            name={"lengthLimit"}
            label={"文本长度限制"}
        >
            <InputNumber placeholder="请输入文本长度限制" controls={false} min={0} precision={0} />
        </Form.Item>
        <Form.Item
            name={"minRows"}
            label={"最小行数"}
        >
            <InputNumber placeholder="请输入最小行数" controls={false} min={1} precision={0} />
        </Form.Item>
        <Form.Item
            name={"maxRows"}
            label={<CommonTooltipLabel label="最大行数" title={`最大行数大于1表示使用文本域`} />}
        >
            <InputNumber placeholder="请输入最大行数" controls={false} min={1} precision={0} />
        </Form.Item>
    </>
}

export const SelectConfig = (props: IConfigProps) => {
    const { form } = props
    const optionsType = Form.useWatch("optionsType", form)
    const [openEditOptionsModal, setOpenEditOptionsModal] = useState<any>()
    const [openSelectOptionsModal, setOpenSelectOptionsModal] = useState<any>()

    const editOptions = () => {
        if (optionsType === 1) {
            setOpenEditOptionsModal({
                form,
            })
        } else {
            setOpenSelectOptionsModal({
                form,
            })
        }
    }

    return <>
        <Form.Item
            name={"mode"}
            label={"多选"}
        >
            <Switch />
        </Form.Item>
        <div className="with-suffix">
            <Form.Item
                name={"optionsType"}
                label={"数据源"}
            >
                <Radio.Group
                    options={[
                        { value: 1, label: '静态数据' },
                        { value: 2, label: '读取配置项' },
                    ]}
                />
            </Form.Item>
            <Form.Item name={"options"} hidden></Form.Item>
            <Form.Item name={"optionsOrigin"} hidden></Form.Item>
            {optionsType && (<div className="suffix">
                <EditOutlined title="立即录入" className="primary pointer" onClick={editOptions} />
            </div>)}
        </div>
        <EditOptions open={openEditOptionsModal} setOpen={setOpenEditOptionsModal}></EditOptions>
        <SelectOptions open={openSelectOptionsModal} setOpen={setOpenSelectOptionsModal}></SelectOptions>
    </>
}


export const InputNumberConfig = (props: IConfigProps) => {
    return <>
        <Form.Item
            name={"suffix"}
            label={"后缀文本"}
        >
            <Input placeholder="请输入后缀文本" />
        </Form.Item>
        <Form.Item
            name={"min"}
            label={"最小值"}
        >
            <InputNumber placeholder="请输入最小值" controls={false} />
        </Form.Item>
        <Form.Item
            name={"max"}
            label={"最大值"}
        >
            <InputNumber placeholder="请输入最大值" controls={false} />
        </Form.Item>
        <Form.Item
            name={"precision"}
            label={"数值精度"}
        >
            <InputNumber placeholder="请输入数值精度" controls={false} />
        </Form.Item>
    </>
}
